<template>
    <div class="container">
        <div class="iconBox" v-for="item in iconList" @click="select(item)">
            <span><i :class="item"></i></span>
        </div>
    </div>
</template>

<script>
import icon from './icon';
export default {
    data() {
        return {
            iconList: icon,
        }
    },
    methods: {
        select(icon) {
            console.log(1111, icon)
            this.$emit('icon', icon)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 350px;
    overflow: auto;
}
.iconBox {
    height: 40px;
    line-height: 40px;
    width: 25%;
    display: inline-block;
    text-align: center;
    i {
        font-size: 18px;
    }
}
.iconBox:hover {
    background-color: #ddd;
    cursor: pointer;
    i {
        color: #409EFF
    }
}
</style>
